<script lang="ts" setup>
  import { useRoute, useRouter } from 'vue-router'
  import { onMounted, ref, watch } from 'vue'
  import appStore from '@/store'
  const router = useRouter()
  const route = useRoute()
  const routerTo = (name: string) => {
    router.push({ name })
  }
  const defaultActive = ref('0')
  const defaultOpeneds = ref<string[]>(['0'])
  const nodeTree = [
    {
      title: 'Fleet管理',
      child: [
        { title: '我的Fleet', name: 'runningState' },
        { title: '伸缩策略管理', name: 'autoScaling' },
        { title: '别名管理', name: 'aliasesList' },
        { title: '日志管理', name: 'ltsList' }
      ],
      icon: 'Finished'
    },
    {
      title: '事件审计',
      child: [
        { title: '事件列表', name: 'eventList' },
        { title: '消息管理', name: 'messageList' }
      ],
      icon: 'Filter'
    },
    {
      title: '配置',
      child: [
        { title: '实例规格组', name: 'instanceList' },
        { title: '账号信息', name: 'userInfoList' }
      ],
      icon: 'Operation'
    }
  ]
  watch(
    () => router.currentRoute.value,
    async () => {
      await router.isReady()
      let routeName = route.name as string
      defaultActive.value = '0'
      defaultOpeneds.value = ['0']
      if (['fleetDetails', 'createFleet', 'runningState'].includes(routeName)) {
        defaultOpeneds.value[0] = '1'
        defaultActive.value = '1-1'
      }
      if (['createAutoScaling', 'autoScaling', 'autoScalingDetails'].includes(routeName)) {
        defaultOpeneds.value[0] = '1'
        defaultActive.value = '1-2'
      }
      if (['createAlias', 'aliasDetail', 'aliasesList'].includes(routeName)) {
        defaultOpeneds.value[0] = '1'
        defaultActive.value = '1-3'
      }
      if (['ltsList', 'createLts', 'ltsDetail'].includes(routeName)) {
        defaultOpeneds.value[0] = '1'
        defaultActive.value = '1-4'
      }
      if (['createApplication', 'applicationDetail', 'applicationList'].includes(routeName)) {
        defaultOpeneds.value[0] = '0'
        defaultActive.value = '2'
      }
      if (['eventList', 'messageList'].includes(routeName)) {
        defaultOpeneds.value[0] = '0'
        defaultActive.value = '3-1'
      }
      if (['messageList'].includes(routeName)) {
        defaultOpeneds.value[0] = '0'
        defaultActive.value = '3-2'
      }
      if (['instanceList', 'instanceDetails'].includes(routeName)) {
        defaultOpeneds.value[0] = '0'
        defaultActive.value = '4-1'
      }
      if (['userInfoList', 'resconfigDetails'].includes(routeName)) {
        defaultOpeneds.value[0] = '0'
        defaultActive.value = '4-2'
      }
      if (['adduser', 'insert', 'insertResourceConfig', 'resconfigDetails', 'userMgmtList'].includes(routeName)) {
        defaultOpeneds.value[0] = '4'
        defaultActive.value = '4-3'
      }
    }
  )
  onMounted(() => {
    let userType = localStorage.getItem('UserType') || 0
    if (userType === '9') {
      nodeTree[2].child.push({ title: '用户管理', name: 'userMgmtList' })
    }
  })
</script>
<template>
  <div id="left-menu">
    <div class="menu-list">
      <el-menu :default-active="defaultActive" :default-openeds="defaultOpeneds" class="menu-project" router>
        <el-menu-item index="0" @click="routerTo('Homepage')" :disabled="appStore.userStore.project_id.length == 0">
          <el-icon><component is="House" /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-sub-menu index="1">
          <template #title>
            <el-icon><component :is="nodeTree[0].icon" /></el-icon>
            <span>{{ nodeTree[0].title }}</span>
          </template>
          <el-menu-item
            :index="`${1}-${i + 1}`"
            v-for="(p, i) in nodeTree[0].child"
            :key="i"
            @click="routerTo(p.name)"
            :disabled="appStore.userStore.project_id.length == 0"
          >
            <span class="item-round" />{{ p.title }}
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item index="2" @click="routerTo('applicationList')" :disabled="appStore.userStore.project_id.length == 0">
          <el-icon><component is="Files" /></el-icon>
          <span>应用包管理</span>
        </el-menu-item>
        <el-sub-menu index="3">
          <template #title>
            <el-icon><component :is="nodeTree[1].icon" /></el-icon>
            <span>{{ nodeTree[1].title }}</span>
          </template>
          <el-menu-item
            :index="`${3}-${i + 1}`"
            v-for="(p, i) in nodeTree[1].child"
            :key="i"
            @click="routerTo(p.name)"
            :disabled="appStore.userStore.project_id.length == 0"
          >
            <span class="item-round" />{{ p.title }}
          </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="#4">
          <template #title>
            <el-icon><component :is="nodeTree[2].icon" /></el-icon>
            <span>{{ nodeTree[2].title }}</span>
          </template>
          <el-menu-item
            :index="`${4}-${i + 1}`"
            v-for="(p, i) in nodeTree[2].child"
            :key="i"
            @click="routerTo(p.name)"
            :disabled="appStore.userStore.project_id.length == 0"
          >
            <span class="item-round" />{{ p.title }}
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  #left-menu {
    min-width: 199px;
    min-height: calc(100vh - 50px);
    background-color: $blank-color;
    border-right: 1px solid $border-color;

    .el-menu {
      border: none;
      color: $text-color;
      .item-round {
        width: 3px;
        height: 3px;
        margin-right: 18px;
        background-color: $text-color;
      }
      .is-active {
        color: $main-color;
      }
      .is-active > .item-round {
        width: 4px;
        height: 4px;
        margin-right: 17px;
        background-color: $main-color;
      }
      .el-sub-menu > .el-menu-item {
        padding-left: 28px;
      }
    }
    .el-icon {
      width: 16px;
      height: 16px;
      margin-right: 12px;
      font-size: 16px;
    }
    .el-sub-menu .el-icon {
      font-size: 16px;
    }
  }
</style>
